import { BrowserRouter, useRoutes } from 'react-router-dom';
import { Suspense } from 'react';
import { routes, deviceLayouts } from './routes.tsx';
import AuthInterceptor from './AuthInterceptor.tsx';
import {useDevice} from "../utils/ResizeHandle.ts";
import {useCurDevice} from "../stores/hooks/index.ts";


const AppRouter = () => {
    // 设备相关逻辑
    useDevice(); // 设备检测钩子
    const curDevice = useCurDevice();

    // 获取动态布局
    const LayoutComponent = deviceLayouts[curDevice] || deviceLayouts.default;

    // 动态生成路由配置
    const processedRoutes = routes.map(route => ({
        ...route,
        element: route.path === '/' ?
            <LayoutComponent>{route.element}</LayoutComponent> :
            route.element
    }));

    // 使用useRoutes生成路由元素
    //高级应用：使用useRoutes生成路由元素
    const routing = useRoutes(processedRoutes);

    return (
        <BrowserRouter>
            <AuthInterceptor>
                <Suspense fallback={<div>Loading...</div>}>
                    {routing}
                </Suspense>
            </AuthInterceptor>
        </BrowserRouter>
    );
};

export default AppRouter;
